/**
 * @fileoverview Templates for Coding with Chrome editor.
 *
 * @license Copyright 2015 The Coding with Chrome Authors.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 * @author mbordihn@google.com (Markus Bordihn)
 */

{namespace cwc.soy.ui.Gui autoescape="strict"}

/**
 * Main HTML template for the Coding with Chrome GUI.
 */
{template .guiTemplate}
  {@param prefix: string}
  {@param? opt_title: string}
  <div id="{$prefix}chrome" class="mdl-layout mdl-js-layout">

    // Header with title, menubar and icons.
    <header id="{$prefix}header" class="mdl-layout__header bg_30_pct_black">
      <div class="mdl-layout__header-row">

        // Title
        <div class="mdl-layout-title" id="{$prefix}title-body">
          <div class="mdl-textfield mdl-js-textfield">
            <input id="{$prefix}title" class="mdl-textfield__input" type="text" value="{$opt_title ? $opt_title : 'Untitled Project'}">
            <label class="mdl-textfield__label" for="sample1">Title...</label>
          </div>
          <span id="{$prefix}status">*</span>
        </div>

        <div class="mdl-layout-spacer"></div>

        // Menu Bar
        <div id="{$prefix}menu-bar"></div>
      </div>
    </header>

    // Navigation
    <div id="{$prefix}navigation" class="mdl-layout__drawer"></div>

    // Main content body
    <section id="{$prefix}body">
      // Main content with library, preview, editor and console.
      <div id="{$prefix}content"></div>

      // Sidebar
      <div id="{$prefix}sidebar"></div>

      // Notification bar
      <div id="{$prefix}notification"></div>
    </section>

    // Overlay, mostly used for the select screen.
    <section id="{$prefix}overlay"></section>

    // Settings screen.
    <section id="{$prefix}settings"></section>

    // Console
    <div id="{$prefix}console"></div>

    // Status bar
    <footer id="{$prefix}status-bar"></footer>
  </div>

{/template}
